<template>
<div class="main2-back">
  <div class="main2-post" v-if="!hasLogin">
    <p class="one"><span :class="selected==1?'selected':''" @click="loginOrRegister(1)">登陆</span><span :class="selected==2?'selected':''" @click="loginOrRegister(2)">注册</span></p>
    <div v-if="selected==1">
      <p class="two"><input type="text" v-model="username" placeholder="请输入用户名" @keyup.enter="login"></p>
      <p class="two"><input type="password" v-model="password" placeholder="请输入密码" @keyup.enter="login"></p>
      <p class="three"><span @click="remeberPas"><input type="checkbox"
                                                                  :checked="remeberPassword">记住密码</span><span class="forget-password" @click="forgetPasModal=true">忘记密码</span>
      </p>
      <p class="four">
        <button @click="login">登陆</button>
      </p>
    </div>
    <div v-if="selected==2">
      <p class="two"><input type="text" v-model="registerName" placeholder="请输入用户名" @keyup.enter="register"></p>
      <p class="two"><input type="password" v-model="registerPas" placeholder="请输入密码" @keyup.enter="register"></p>
      <p class="two"><input type="password" v-model="registerPasConfirm" placeholder="请再次输入密码" @keyup.enter="register"></p>
      <p class="two"><input type="text" v-model="mail" placeholder="请输入邮箱" @keyup.enter="register"></p>
      <!--<p class="get-code"><input type="text" v-model="verifyCode">-->
      <!--<button>获取验证码</button>-->
      <!--</p>-->
      <p class="four" style="margin-top: 20px;">
        <button @click="register">注册</button>
      </p>
    </div>
  </div>
  <Modal v-model="forgetPasModal" class-name="forgetpas-modal" width="320px" v-bind:closable="false" @on-ok="submit">
    <p class="item"><input type="text" placeholder="请输入邮箱" v-model="reset_mail">
      <button @click="getCode" class="get_code" :class="second==0?'':'dark_button'" :disabled="second!=0">
                    {{second ==0?'获取验证码':second+'s'}}
                </button>
    </p>
    <p class="item"><input type="text" placeholder="请输入验证码" v-model="reset_code"></p>
    <p class="item"><input type="password" placeholder="请输入新密码" v-model="reset_pas"></p>
    <p class="item"><input type="password" placeholder="请确认密码" v-model="reset_pas_confirm"></p>
    <div slot="footer">
      <Button type="text" size="large" @click="forgetPasModal=false">取消</Button>
      <Button type="primary" size="large" @click="submit">确定</Button>
    </div>
  </Modal>
</div>
</template>

<script>
import axios from 'axios';
import {
  BackURL
} from "../js/config";
import event from '../components/event';
import {
  checkMail
} from '../js/utils';

export default {
  name: "login2",
  data() {
    return {
      username: '',
      password: '',
      hasLogin: '',
      remeberPassword: false,
      selected: 1,
      mail: '',
      registerPas: '',
      registerPasConfirm: '',
      verifyCode: '',
      registerName: '',
      forgetPasModal: false,
      second: 0,
      reset_mail: '',
      reset_code: '',
      reset_pas: '',
      reset_pas_confirm: ''
    }
  },
  methods: {
    // getCode() {
    //     axios.get(BackURL + 'register').then((res) => {
    //         // console.log('res', res);
    //         this.imgUrl = 'data:image/jpg;base64,' + res.data;
    //     }).catch((err) => {
    //         console.log('err', err);
    //         this.$Notice.error({desc: '获取验证码失败', duration: 2})
    //     })
    // },
    register() {
      if (!this.registerName) {
        this.$Notice.warning({
          desc: '请输入用户名'
        });
        return;
      }
      if (!this.registerPas) {
        this.$Notice.warning({
          desc: '请输入密码'
        });
        return;
      }
      if (this.registerPas != this.registerPasConfirm) {
        this.$Notice.warning({
          desc: '请确保两次输入的密码一致'
        });
        return;
      }
      if (!this.mail) {
        this.$Notice.warning({
          desc: '请输入邮箱'
        });
        return;
      }
      axios.post(BackURL + 'register2', {
        username: this.registerName,
        password: this.registerPas,
        mail: this.mail
      }).then((res) => {
        if (res.data == 2) {
          this.$Notice.error({
            desc: '用户已存在',
            duration: 2
          });
          // this.getCode();
        } else if (res.data == 4) {
          this.$Notice.warning({
            desc: '该邮箱已被注册',
            duration: 2
          })
        } else {
          this.$Notice.success({
            desc: '注册成功',
            duration: 2
          })
          this.selected = 1;
        }
      }).catch((err) => {
        console.log('err', err);
        this.$Notice.error({
          desc: '注册失败',
          duration: 2
        })
        // this.getCode();
      })
    },
    login() {
      console.log(this.remeberPassword);
      axios.post(BackURL + 'login', {
        username: this.username,
        password: this.password
      }).then((res) => {
        console.log(res);
        if (res.data.status == 0) {
          this.$Notice.warning({
            desc: '用户不存在',
            duration: 2
          })
        } else if (res.data.status == 1) {
          this.$Notice.warning({
            desc: '密码错误',
            duration: 2
          })
        } else if (res.data.status == 2) {
          this.$Notice.success({
            desc: '登陆成功',
            duration: 2
          });
          window.localStorage.setItem('screeningLogin', res.data.token);
          window.localStorage.setItem('user', this.username);
          event.$emit('loginSuccess');
          this.$router.push('/screening2');
          if (this.remeberPassword) {
            window.localStorage.setItem('username', this.username);
            window.localStorage.setItem('password', this.password);
          }
        }
      }).catch((err) => {
        this.$Notice.error({
          desc: '登陆失败',
          duration: 2
        })
      })
    },
    remeberPas() {
      console.log(this.remeberPassword);
      this.remeberPassword = !this.remeberPassword;
      window.localStorage.setItem('rememberPassword', this.remeberPassword);
    },
    loginOrRegister(num) {
      this.selected = num;
    },
    getLogin() {
      var rememberPas = window.localStorage.getItem('rememberPassword');
      this.remeberPassword = window.localStorage.getItem('rememberPassword') ? (window.localStorage.getItem('rememberPassword') == 'false' ? false : true) : false;
      if (rememberPas == 'true') {
        this.username = window.localStorage.getItem('username');
        this.password = window.localStorage.getItem('password');
      }
      this.hasLogin = window.localStorage.getItem('screeningLogin')
    },
    getCode() {
      console.log('获取验证码')
      if (!checkMail(this.reset_mail)) {
        this.$Message.info({
          content: '请输入正确的邮箱'
        })
        return;
      }
      axios.post(BackURL + 'mail', {
        mail: this.reset_mail
      }).then((res) => {
        console.log('mail res', res);
        if (res.data == 2) {
          this.$Notice.success({
            desc: '验证码发送成功',
            duration: 2
          });
          this.second = 30;
          this.interval = setInterval(() => {
            this.second--;
            console.log(this.second);
            if (this.second == 0) {
              clearInterval(this.interval);
              this.second = 0;
            }
          }, 1000)
        } else if (res.data == 0) {
          this.$Notice.warning({
            desc: '邮箱不存在',
            duration: 2
          })
        }
      }).catch((err) => {
        console.log('mail err', err);
      })
    },
    submit() {
      if (!this.reset_code) {
        this.$Message.info({
          content: '请输入验证码'
        });
        return;
      }
      if (!this.reset_mail) {
        this.$Message.info({
          content: '请输入邮箱'
        });
        return;
      }
      if (this.reset_pas != this.reset_pas_confirm) {
        this.$Message.info({
          content: '两次输入的密码不一致'
        });
        return;
      }
      if (!this.reset_pas) {
        this.$Message.info({
          content: '请输入密码'
        });
        return;
      }
      if (!this.reset_pas_confirm) {
        this.$Message.info({
          content: '请确认密码'
        });
        return;
      }
      axios.put(BackURL + 'mail', {
        mail: this.reset_mail,
        code: this.reset_code,
        password: this.reset_pas
      }).then((res) => {
        console.log('put res', res);
        if (res.data == 0) {
          this.$Notice.error({
            desc: '验证码错误',
            duration: 2
          });
        } else {
          this.$Notice.success({
            desc: '找回密码成功',
            duration: 2
          });
          this.forgetPasModal = false;
          // this.$router.push('/login2')
        }
      }).catch((err) => {
        console.log('put err', err);
        this.$Notice.error({
          desc: '找回密码失败',
          duration: 2
        })
      })
    }
  },
  mounted() {
    this.getLogin();
    event.$on('logout', () => {
      this.getLogin();
    })
    event.$on('loginRegister', (arg) => {
      this.selected = arg;
    })
  },
  destroyed() {
    event.$off('logout');
    event.$emit('loginRegister');
    if (!window.sessionStorage.getItem('first_login')) {
      console.log('login emit getOriginData');
      event.$emit('getOriginData', '9999999999999');
      window.sessionStorage.setItem('first_login', 1);
    }
  }
}
</script>

<style scoped lang="scss">
.main2-back {
    position: absolute;
    top: 125px;
    bottom: 0;
    /*background-color: rgb(234, 0, 64);*/
    background: url("../assets/back.png") no-repeat;
    background-size: 100%;
    width: 100%;
}

.main2-post {
    position: absolute;
    top: 50px;
    right: 50px;
    background-color: rgb(255, 255, 255);
    padding: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 250px;
    .get-code {
        input {
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
            border-radius: 4px;
            border-style: groove;
        }
    }
    .one {
        display: flex;
        justify-content: space-around;
        font-size: 18px;
        span {
            cursor: pointer;
        }
        .selected {
            color: rgb(8, 150, 216);
        }
    }
    .two {
        margin: 20px 0;
        input {
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
            width: 100%;
            border-radius: 4px;
            border-style: groove;
        }
    }
    .three {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        input {
            vertical-align: middle;
        }
        span {
            cursor: pointer;
        }
        .forget-password:hover {
            text-decoration: underline;
        }
    }
    .four {
        text-align: center;
        button {
            width: 150px;
            height: 35px;
            line-height: 35px;
        }
    }
}
</style>
